<template>

    <div class="white-module st">
        <div class="troops">
        <img src="@/assets/title_bg.png"/>
        <div class="c"><span>参赛代表队</span> 山东省潍坊市第一中学 <span>领队</span> 王大大</div>
      </div>
        <div class="contest-title">
          <div class="left"><span>山东省潍坊地区选拔赛</span> <span>比赛时间 2023-4-23~2023-</span><span>报名时间 2023-4-1~2023-4</span></div><strong>第一赛季</strong>
      </div>
      <div class="global-table">
          <el-table
            :data="tableData"
            :header-cell-style="{
                background: '#F5F7FA',
                color: '#333',
            }"
            style="width: 100%"
          >
            <el-table-column prop="title" label="赛项" />
            <el-table-column prop="name" width="300" label="队伍名称" />
            <el-table-column prop="group" label="组别" />
            <el-table-column prop="user" label="选手" />
            <el-table-column  label="状态" >
               <template #default="scope">
                 <span class="red" v-if="scope.row.state==1">审核中</span>

                 <span class="black" v-if="scope.row.state==2">报名成功</span>

                 <span class="black" v-if="scope.row.state==3">完赛</span>
                 <span class="red" v-if="scope.row.state==4">  已取消 / 弃权</span>

              </template>
            </el-table-column>
            <el-table-column  label="附属操作" >
               <template #default="scope">
                <div class="btns"> <span class="blue" @click="handleDraw">开始抽签</span></div>

              </template>
            </el-table-column>
            <el-table-column  label="附属状态" >
               <template #default="scope">
                 <span class="yellow" v-if="(scope.row.state+4)==5">比赛中</span>

              </template>
            </el-table-column>

            <el-table-column  label="操作" width="280">
               <template #default="scope">

                <div  class="btns">
                    <span > 查看信息 </span>
                    <span type="text"  size="small"> 查看成绩 </span>
                    <span type="text"  size="small"> 获奖证书 </span></div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="contest-title">
          <div class="left"><span>山东省潍坊地区选拔赛</span> <span>比赛时间 2023-4-23~2023-</span><span>报名时间 2023-4-1~2023-4</span></div><strong>第二赛季</strong>
      </div>
      <div class="global-table">
          <el-table
            :data="tableData"
            :header-cell-style="{
                background: '#F5F7FA',
                color: '#333',
            }"
            style="width: 100%"
          >
            <el-table-column prop="title" label="赛项" width="400"   />
            <el-table-column prop="name"   label="队伍名称" />
            <el-table-column prop="group" label="组别" width="200"  />
            <el-table-column prop="user" label="选手"  width="200"/>
            <el-table-column  label="状态" width="200" >
               <template #default="scope">
                 <span class="yellow" v-if="scope.row.state==4">比赛中</span>
                 <span class="blue" v-if="scope.row.state == 5">已获晋级资格</span>
                 <span class="black" v-if="scope.row.state==6">晋级成功</span>
                 <span class="yellow" v-if="scope.row.state==8">弃权</span>
              </template>
            </el-table-column>
            <el-table-column  label="附属操作"  width="200">
               <template #default="scope">
               <el-button type="text">查看抽签结果</el-button>

              </template>
            </el-table-column>
            <el-table-column  label="附属状态"  width="200">
               <template #default="scope">

              </template>
            </el-table-column>
            <el-table-column  label="操作" width="280">
               <template #default="scope">

                <div  class="btns">
                    <span > 查看信息 </span>
                    <span type="text"  size="small"> 查看成绩 </span>
                    <span type="text"  size="small"> 获奖证书 </span>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>

    </div>
    <el-dialog
    v-model="dialogVisible" custom-class="global-hint-dialog" :show-close="false"
    width="400px"
  >
    <div class="confirm-dialog">
         <div class="image"><img src="@/assets/common/hint_blue.png"/></div>
         <div class="text">本赛事报名已经截止，不可修改报名信息！</div>
         <div class="btns">
            <el-button type="primary" @click="dialogVisible=false">知道了</el-button>

         </div>
    </div>

  </el-dialog>
  </template>
<script lang="ts" setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
let router = useRouter();

const dialogVisible=ref(false);
const tableData = [
    {
        title: "个人飞行赛",
        name: "潍坊一中格斗1队",
        group: "初中组",
        user: "张三",
        state: 1,
    },
    {
        title: "个人飞行赛",
        name: "潍坊一中格斗1队",
        group: "初中组",
        user: "李典",
        state: 2,
    },
    {
        title: "个人飞行赛",
        name: "潍坊一中格斗1队",
        group: "初中组",
        user: "王小三",
        state: 3,
    },
    {
        title: "个人飞行赛",
        name: "潍坊一中格斗1队",
        group: "初中组",
        user: "王小三",
        state: 4,
    },
];
const handleDraw = () => {
    router.push("/enroll/draw");
}

</script>
<style lang="scss" scoped>

.st {
    padding: 20px;

    .troops {
        position: relative;
        margin: 0px 0px 25px 0px;

        img {
            width: 579px;
        }

        .c {
            position: absolute;
            left: 0px;
            top: 0px;
            width: 532px;
            line-height: 54px;
            border-radius: 6px;


            span {
                font-size: 16px;
                font-weight: $font-weight-bold;
                margin-left: 24px;
                margin-right: 11px;
            }

            ;

            span:nth-child(2) {
                margin-left: 30px;
            }
        }
    }


    .contest-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 12px;

        .left {
            display: flex;
            align-items: center;
            font-weight: $font-weight-bold;

            span {
                margin-right: 30px;
            }

            span:first-child {
                color: $color-primary;
            }
        }

    }
    .global-table{
        margin-bottom: 34px;
        span.red{
color: #FC5260;
        }
        span.blue{
color: #00B7B3;
        }
        span.black{
color: #4F5A70;
        }
        span.yellow{
color: #FF8F3C;
        }
        .btns{
            display: flex;
            flex-wrap: wrap;
            color: $color-primary;
            margin:1px 16px 1px 0px;
            line-height: normal;
          span{
            color: $color-primary;
            margin:1px 16px 1px 0px;
            cursor: pointer;
          }
        }
    }
}</style>
